<!--conf
<sample>
              <product version="1.4" edition="pro"/>
                     <modifications>
                            <modified date="070101"/>
                     </modifications>
               </sample>
 --> 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<title>Serialize selected columns</title>
	
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<link rel="stylesheet" type="text/css" href="../../../codebase/dhtmlx.css"/>
	<script src="../../../codebase/dhtmlx.js"></script>
</head>

<body>
	<h1>Serialize selected columns</h1>
	<p>setSerializableColumns method allows you to select which columns will be serialized.</p>
	<table width="600">
		<tr>
			<td>
				<div id="gridbox" style="width:100%;height:270px;background-color:white;"></div>
			</td>
			<td width="20"></td>
			<td><textarea id="mytextarea" style="width:250px;height:250px;"><?xml version="1.0" encoding="iso-8859-1"?><rows><row id='r1'><cell>index is 1</cell><cell>load turn started from 1</cell></row><row id='r2'><cell>index is 2</cell><cell>load turn started from 1</cell></row><row id='r3'><cell>index is 3</cell><cell>load turn started from 1</cell></row><row id='r4'><cell>index is 4</cell><cell>load turn started from 1</cell></row><row id='r5'><cell>index is 5</cell><cell>load turn started from 1</cell></row><row id='r6'><cell>index is 6</cell><cell>load turn started from 1</cell></row><row id='r7'><cell>index is 7</cell><cell>load turn started from 1</cell></row><row id='r8'><cell>index is 8</cell><cell>load turn started from 1</cell></row><row id='r9'><cell>index is 9</cell><cell>load turn started from 1</cell></row><row id='r10'><cell>index is 10</cell><cell>load turn started from 1</cell></row><row id='r11'><cell>index is 11</cell><cell>load turn started from 1</cell></row><row id='r12'><cell>index is 12</cell><cell>load turn started from 1</cell></row><row id='r13'><cell>index is 13</cell><cell>load turn started from 1</cell></row><row id='r14'><cell>index is 14</cell><cell>load turn started from 1</cell></row><row id='r15'><cell>index is 15</cell><cell>load turn started from 1</cell></row><row id='r16'><cell>index is 16</cell><cell>load turn started from 1</cell></row><row id='r17'><cell>index is 17</cell><cell>load turn started from 1</cell></row><row id='r18'><cell>index is 18</cell><cell>load turn started from 1</cell></row><row id='r19'><cell>index is 19</cell><cell>load turn started from 1</cell></row><row id='r20'><cell>index is 20</cell><cell>load turn started from 1</cell></row><row id='r21'><cell>index is 21</cell><cell>load turn started from 1</cell></row><row id='r22'><cell>index is 22</cell><cell>load turn started from 1</cell></row><row id='r23'><cell>index is 23</cell><cell>load turn started from 1</cell></row><row id='r24'><cell>index is 24</cell><cell>load turn started from 1</cell></row><row id='r25'><cell>index is 25</cell><cell>load turn started from 1</cell></row><row id='r26'><cell>index is 26</cell><cell>load turn started from 1</cell></row><row id='r27'><cell>index is 27</cell><cell>load turn started from 1</cell></row><row id='r28'><cell>index is 28</cell><cell>load turn started from 1</cell></row><row id='r29'><cell>index is 29</cell><cell>load turn started from 1</cell></row><row id='r30'><cell>index is 30</cell><cell>load turn started from 1</cell></row><row id='r31'><cell>index is 31</cell><cell>load turn started from 1</cell></row><row id='r32'><cell>index is 32</cell><cell>load turn started from 1</cell></row><row id='r33'><cell>index is 33</cell><cell>load turn started from 1</cell></row><row id='r34'><cell>index is 34</cell><cell>load turn started from 1</cell></row><row id='r35'><cell>index is 35</cell><cell>load turn started from 1</cell></row><row id='r36'><cell>index is 36</cell><cell>load turn started from 1</cell></row><row id='r37'><cell>index is 37</cell><cell>load turn started from 1</cell></row><row id='r38'><cell>index is 38</cell><cell>load turn started from 1</cell></row><row id='r39'><cell>index is 39</cell><cell>load turn started from 1</cell></row><row id='r40'><cell>index is 40</cell><cell>load turn started from 1</cell></row><row id='r41'><cell>index is 41</cell><cell>load turn started from 1</cell></row><row id='r42'><cell>index is 42</cell><cell>load turn started from 1</cell></row><row id='r43'><cell>index is 43</cell><cell>load turn started from 1</cell></row><row id='r44'><cell>index is 44</cell><cell>load turn started from 1</cell></row><row id='r45'><cell>index is 45</cell><cell>load turn started from 1</cell></row><row id='r46'><cell>index is 46</cell><cell>load turn started from 1</cell></row><row id='r47'><cell>index is 47</cell><cell>load turn started from 1</cell></row><row id='r48'><cell>index is 48</cell><cell>load turn started from 1</cell></row><row id='r49'><cell>index is 49</cell><cell>load turn started from 1</cell></row><row id='r50'><cell>index is 50</cell><cell>load turn started from 1</cell></row><row id='r51'><cell>index is 51</cell><cell>load turn started from 1</cell></row></rows></textarea></td>
		</tr>
		<tr>
			<td>
                <input type='radio' name='a1' checked onclick='mygrid.setSerializableColumns()' /> Serialize all columns <br/>
                <input type='radio' name='a1' onclick='mygrid.setSerializableColumns("true,false")' /> 
                Serialize the first column <br/>
                <input type='radio' name='a1' onclick='mygrid.setSerializableColumns("false,true")' /> 
                Serialize the second column
			</td>
			<td></td>
			<td>
				<a href="javascript:void(null)" onclick="loadGridContent()">Load Grid from Text Area</a><br>
				<a href="javascript:void(null)" onclick="serializeGrid()">Serialize Grid</a>

			</td>
		</tr>
	</table>
<br>

<script>
	function serializeGrid(){
		mygrid.setSerializationLevel(true,true);
		var myXmlStr = mygrid.serialize()
		document.getElementById("mytextarea").value = myXmlStr.replace(/></g,">\n<");
	}
	function loadGridContent(){
		mygrid.clearAll();
		mygrid.loadXMLString(document.getElementById("mytextarea").value)
	}
	mygrid = new dhtmlXGridObject('gridbox');
	mygrid.setImagePath("../../../codebase/imgs/");
	mygrid.setHeader("Column A, Column B");
	mygrid.setInitWidths("100,250")
	mygrid.setColAlign("right,left")
	mygrid.setColTypes("ro,ed");
	mygrid.setColSorting("int,str")
	mygrid.setSkin("dhx_skyblue")
	mygrid.init();
	
	
</script>

</body>
</html>
